<template>
  <el-pagination
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    :page-sizes="sizes"
    :page-size="size"
    :current-page="index"
    @size-change="sizeChange"
    @current-change="currentChange"
  ></el-pagination>
</template>
<script setup lang="ts">
interface PropsType {
  index: number
  size: number
  total: number
  onChange: Function
  sizes?: number[]
}

const props = withDefaults(defineProps<PropsType>(), {
  total: 0,
  sizes: () => [10, 20, 30, 40, 50],
})

const emits = defineEmits<{
  (e: 'update:size', size: number): void
  (e: 'update:index', index: number): void
}>()

// const emit = defineEmits(['update:size', 'update:index'])

function currentChange(index: number) {
  emits('update:index', index)
  props.onChange()
}

function sizeChange(size: number) {
  emits('update:size', size)
  currentChange(1)
}
</script>
